import { createStore } from "vuex";

// 一个核心 store
const store = createStore({
  // store 的状态
  state: {
    count: 1,
  },

  // 基于 state 的计算属性
  getters: {},

  // 1. 唯一修改 state 数据的地方
  // 2. 只能写同步的代码
  mutations: {
    increment(state, payload) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },

  // 1. 与 mutation 类似，但不能直接修改 state。
  // 2. 可以有异步的代码
  /**
   * 参数1. context ，简单的认为就是 store 实例，有
   *            state、getters、commit()、dispatch()
   * 参数2. payload ，派发该 action 时，传递过来的参数
   */
  actions: {
    incrementAsync(context, payload) {
      setTimeout(() => {
        context.commit("increment");
      }, 1000);
    },

    decrementAsync({ commit }, payload) {
      console.log("decrementAsync", payload); // 100
      setTimeout(() => {
        commit("decrement");
      }, 1000);
    },
  },
});

export default store;
